<template>
    <div>
        这边是test页面
        <p>
            请求的url:
            <input type="text" v-model="url">
        </p>
        <p>
            page:
            <input type="text" v-model="page">
        </p>
        <p>
            limit:
            <input type="text" v-model="limit">
        </p>
        <button @click="re">请求</button>

        <div>
            <button @click="previous">上一页</button>

            <button @click="next">下一页</button>
        </div>
        <ul class="table">
            <li v-for="item in tableData" :key="item.id">
                <label>
                    <input type="checkbox" :value="item.id" v-model="checkedList">
                    {{item.text}}
                </label>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      url: '/queryTable',
      page: 1,
      limit: 10,
      tableData: [],
      sumPages: 0,
      checkedList: []
    }
  },
  mounted () {
    this.re()
    console.log(localStorage.getItem('checkedList'))
    this.checkedList =
            JSON.parse(localStorage.getItem('checkedList')) || []
    window.addEventListener('unload', () => {
      localStorage.setItem(
        'checkedList',
        JSON.stringify(this.checkedList)
      )
    })
  },
  methods: {
    previous () {
      this.page > 1 ? (this.page--, this.re()) : 1
    },
    next () {
      this.page < this.sumPages
        ? (this.page++, this.re())
        : this.sumPages
    },
    re () {
      this.$axios
        .get(this.url, {
          params: { page: this.page, limit: this.limit }
        })
        .then(res => {
          let tableList = res.data.list
          this.tableData = tableList
          this.sumPages = res.data.sumPages
        })
    }
  }
}
</script>

<style scoped>
.table {
    text-align: initial;
}
</style>
